<template>
    <div class="show-down-container">
        <div class="show-down-content" id="blueNoteBox" :class="showStyleClass">
            <section class="show-down" id="blueNote" v-html="htmlValue"></section>
        </div>
    </div>
</template>

<script setup>
import {defineProps, ref, watch, computed, onMounted} from "vue";
import MarkdownIt from 'markdown-it';
import highlightjs from "../utils/langHighlight.js";
import markdownItSpan from "../utils/markdown-it-span.js";
import markdownItMath from "../utils/markdown-it-math.js";
import markdownItRemovePre from "../utils/markdown-it-remove-pre.js";
import markdownItLinkFoot from "../utils/markdown-it-link-foot.js";
import markdownItTableOfContents from "markdown-it-table-of-contents";
import markdownItRuby from "markdown-it-ruby";
import markdownItImplicitFigures from "markdown-it-implicit-figures";
import markdownItDeflist from "markdown-it-deflist";
import markdownItLi from "../utils/markdown-it-li.js";
import markdownItImageFlow from "../utils/markdown-it-imageflow.js";

import {useSystemStore} from "../store/index.js";
import {storeToRefs} from "pinia";

const props = defineProps({
    text: String,
})

const htmlValue = ref('');

const markdownParser = MarkdownIt({
    html: true,
    highlight: (str, lang) => {
        // 加上custom则表示自定义样式，而非微信专属，避免被remove pre
        if (lang && highlightjs.getLanguage(lang)) {
            try {
                const formatted = highlightjs
                    .highlight(lang, str, true)
                    .value.replace(/\n/g, "<br/>") // 换行用br表示
                    .replace(/\s/g, "&nbsp;") // 用nbsp替换空格
                    .replace(/span&nbsp;/g, "span "); // span标签修复
                return '<pre class="custom"><code class="hljs">' + formatted + "</code></pre>";
            } catch (e) {
                console.log(e);
            }
        }
        return '<pre class="custom"><code class="hljs">' + markdownParser.utils.escapeHtml(str) + "</code></pre>";
    },
});

markdownParser
    .use(markdownItSpan)
    .use(markdownItMath)
    .use(markdownItRemovePre)
    .use(markdownItLinkFoot)
    .use(markdownItTableOfContents, {
        transformLink: () => "",
        includeLevel: [2, 3],
        markerPattern: /^\[toc\]/im,
    })
    .use(markdownItRuby)
    .use(markdownItImplicitFigures, {figcaption: true})
    .use(markdownItDeflist)
    .use(markdownItLi)
    .use(markdownItImageFlow);

const systemStore = useSystemStore();
const {viewDevice} = storeToRefs(systemStore);

const showStyleClass = computed(() => {
    if (viewDevice.value === 'phone') {
        return {'show-phone': true};
    }
})

watch(() => props.text, () => {
    converterMarkdown();
}, {
    immediate: true,
});

function converterMarkdown() {
    htmlValue.value = markdownParser.render(props.text);
}
</script>

<style scoped lang="less">
.show-down-container {
    width: 100%;
    height: 100%;

    .show-down-content {
        margin: 0 auto;
        padding: 10px 8px;
        box-sizing: border-box;
    }
}

.show-down :deep(img) {
    max-width: 100%;
}

.show-phone {
    width: 375px;
    box-shadow: 0 0 60px rgba(0, 0, 0, .1);
}
</style>